<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>旅游目的地选择</title>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <style>
        ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
            display: flex;
        }
        li {
            padding: 10px 20px;
            background-color: #f2f2f2;
            border: 1px solid #ccc;
            margin-right: 5px;
            position: relative;
        }
        li:hover {
            background-color: #e0e0e0;
        }
        /* 二级菜单样式 */
        ul ul {
            display: none;
            position: absolute;
            left: 100%;
            top: 0;
            background-color: #fff;
            border: 1px solid #ccc;
            padding: 10px;
        }
        li:hover > ul {
            display: flex;
            flex-direction: column; /* 修改为纵向排列 */
        }
        ul ul li {
            display: inline-block;
            padding: 5px 10px;
            margin: 0;
            white-space: nowrap; /* 文字不换行 */
        }

        body {
            margin: 0;
            padding: 0;
        }

        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            padding: 20px;
        }

        .box {
            text-align: center;
            width: 300px; /* 设置宽度为200px */
            height: 200px; /* 设置高度为300px */
            margin: 10px;
            padding: 10px;
            border: none; /* 隐藏边框 */
            border-radius: 5px;
        }

        .box img {
            width: 100%;
            height: auto;
            object-fit: cover;
        }

        .title {
            font-size: 16px;
            margin-top: 5px;
        }

        .info {
            display: flex;
            justify-content: space-between;
        }

        table {
            border-collapse: separate;
            border-spacing: 10px;
        }

        th, td {
            border: none;
            padding: 5px;
        }

        /* 顶部导航栏样式 */
        nav {
            background-color: #fff;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 99;
            text-align: center; /* 居中显示 */
            display: flex;
            align-items: center;
            padding: 5px 20px;
        }

        nav img {
            height: 30px;
        }

        nav a {
            display: inline-block;
            color: #555;
            text-align: center;
            padding: 10px 60px; /* 调整导航栏每个元素的大小 */
            text-decoration: none;
        }

        nav a:hover {
            color: #000;
            background-color: #f5f5f5;
        }

        nav a.active {
            color: #4caf50;
            background-color: #fff;
        }

        .dropdown {
            position: relative;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            top: 100%;
            width: 150px;
            background-color: #f9f9f9;
            padding: 10px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        }

        .dropdown-content a {
            color: black;
            padding: 6px 16px;
            text-decoration: none;
            display: block;
        }

        .dropdown:hover .dropdown-content,
        .dropdown-content:hover {
            display: block;
        }
        /* 顶部导航栏样式 */

        .search {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 100px; /* 调整垂直位置 */
            margin-bottom: 20px;
        }

        /* 目的地table */
        table {
            width: 100%;
            max-width: 800px;
            margin: 0 auto;
            border-collapse: collapse;
        }

        th, td {
            padding: 10px;
            text-align: center;
        }

        th {
            background-color: #f8f9fa;
            color: #495057;
            border-top: 1px solid #dee2e6;
            border-bottom: 1px solid #dee2e6;
        }

        td {
            background-color: #fff;
            color: #212529;
            border: 1px solid #dee2e6;
        }

        a {
            color: #007bff;
            text-decoration: none;
        }

        a:hover {
            color: #0056b3;
            text-decoration: underline;
        }
        /* 目的地table */

    </style>
</head>
<body>
<!-- 顶部导航栏 -->
<nav>
    <!-- logo -->
    <div class="dropdown">
        <a href="http://sight.travel.com/">
            <img src="https://wen-travel.oss-cn-guangzhou.aliyuncs.com/logo.jpg" alt="Logo">
        </a>
    </div>
    <div class="dropdown">
        <a href="http://sight.travel.com/theme" target="_blank">主题精选</a>
    </div>
    <div class="dropdown">
        <a href="http://ticket.travel.com/" target="_blank">去旅行</a>
    </div>
    <div class="dropdown">
        <a href="#">联系我们</a>
    </div>
    <div class="dropdown">
        <a href="http://member.travel.com/sign" target="_blank">签到</a>
    </div>
    <div class="dropdown">
        <a href="#">我的</a>
        <div class="dropdown-content">
            <a href="#" target="_blank">我的账号</a>
            <a href="http://member.travel.com/memberOrder.html" target="_blank">我的订单</a>
            <a href="#" target="_blank">我的地址</a>
        </div>
    </div>
    <a th:if="${loginUser != null}">欢迎, [[${loginUser.username}]]</a>
    <a th:if="${loginUser == null}" href="http://auth.travel.com/login.html">你好，请登录</a>
    <a th:if="${loginUser == null}" href="http://auth.travel.com/regist.html" class="li_2">免费注册</a>
    <a th:if="${loginUser != null}" href="http://auth.travel.com/loguot.html" class="li_2">退出</a>
</nav>


<!-- 搜索栏 -->
<div class="search">
    <input id="keyword_input" type="text" placeholder="输入目的地..." style="width: 400px; height: 50px;font-size: 18px;"/>
    <img src="http://travel.com/image/search.png" onclick="search()" style="margin-left: 10px;">
</div>


<div>
    <!-- 目的地检索 -->
    <table>
        <tr>
            <td>华北地区</td>
            <td>
                <a href="http://search.travel.com/ticketList.html?location=北京">北京</a>
            </td>
            <td>
                <a href="http://search.travel.com/ticketList.html?location=天津">天津</a>
            </td>
            <td>
                <a href="http://search.travel.com/ticketList.html?location=河北">河北</a>
            </td>
            <td>
                <a href="http://search.travel.com/ticketList.html?location=山西">山西</a>
            </td>
            <td>
                <a href="http://search.travel.com/ticketList.html?location=内蒙古自治区">内蒙古自治区</a>
            </td>
        </tr>
        <tr>
            <td>东北地区</td>
            <td>
                <a href="http://search.travel.com/ticketList.html?location=辽宁">辽宁</a>
            </td>
            <td>
                <a href="http://search.travel.com/ticketList.html?location=吉林">吉林</a>
            </td>
            <td>
                <a href="http://search.travel.com/ticketList.html?location=黑龙江">黑龙江</a>
            </td>
        </tr>
        <tr>
            <td>华东地区</td>
            <td>
                <a href="http://search.travel.com/ticketList.html?location=上海">上海</a>
            </td>
            <td>
                <a href="http://search.travel.com/ticketList.html?location=江苏">江苏</a>
            </td>
            <td>
                <a href="http://search.travel.com/ticketList.html?location=浙江">浙江</a>
            </td>
            <td>
                <a href="http://search.travel.com/ticketList.html?location=安徽">安徽</a>
            </td>
            <td>
                <a href="http://search.travel.com/ticketList.html?location=江西">江西</a>
            </td>
            <td>
                <a href="http://search.travel.com/ticketList.html?location=山东">山东</a>
            </td>
        </tr>
        <tr>
            <td>华中地区</td>
            <td>
                <a href="http://search.travel.com/ticketList.html?location=河南">河南</a>
            </td>
            <td>
                <a href="http://search.travel.com/ticketList.html?location=湖北">湖北</a>
            </td>
            <td>
                <a href="http://search.travel.com/ticketList.html?location=湖南">湖南</a>
            </td>
            <td>
                <a href="http://search.travel.com/ticketList.html?location=江西">江西</a>
            </td>
        </tr>
        <tr>
            <td>华南地区</td>
            <td>
                <a href="http://search.travel.com/ticketList.html?location=广东">广东</a>
            </td>
            <td>
                <a href="http://search.travel.com/ticketList.html?location=广西">广西</a>
            </td>
            <td>
                <a href="http://search.travel.com/ticketList.html?location=海南">海南</a>
            </td>
            <td>
                <a href="http://search.travel.com/ticketList.html?location=香港">香港</a>
            </td>
            <td>
                <a href="http://search.travel.com/ticketList.html?location=澳门">澳门</a>
            </td>
        </tr>
        <tr>
            <td>西南地区</td>
            <td>
                <a href="http://search.travel.com/ticketList.html?location=四川">四川</a>
            </td>
            <td>
                <a href="http://search.travel.com/ticketList.html?location=云南">云南</a>
            </td>
            <td>
                <a href="http://search.travel.com/ticketList.html?location=贵州">贵州</a>
            </td>
            <td>
                <a href="http://search.travel.com/ticketList.html?location=重庆">重庆</a>
            </td>
            <td>
                <a href="http://search.travel.com/ticketList.html?location=西藏自治区">西藏自治区</a>
            </td>
        </tr>
        <tr>
            <td>西北地区</td>
            <td>
                <a href="http://search.travel.com/ticketList.html?location=陕西">陕西</a>
            </td>
            <td>
                <a href="http://search.travel.com/ticketList.html?location=甘肃">甘肃</a>
            </td>
            <td>
                <a href="http://search.travel.com/ticketList.html?location=青海">青海</a>
            </td>
            <td>
                <a href="http://search.travel.com/ticketList.html?location=宁夏">宁夏</a>
            </td>
            <td>
                <a href="http://search.travel.com/ticketList.html?location=西藏自治区">新疆维吾尔自治区</a>
            </td>
        </tr>
    </table>

    <!-- 正在热卖 -->
    <h2>正在热卖</h2>
    <div class="container">
        <div class="box">
            <img src="https://wen-travel.oss-cn-guangzhou.aliyuncs.com/ticket/ticket_01.png" alt="ticket1">
            <div class="content">
                <div class="title">三亚亚龙湾热带天堂森林公园门票</div>
                <div class="info">
                    <div class="price" style="color: coral">$100</div>
                    <div class="sales">销量：1000</div>
                </div>
            </div>
        </div>
        <div class="box">
            <img src="https://wen-travel.oss-cn-guangzhou.aliyuncs.com/ticket/ticket_01.png" alt="ticket1">
            <div class="content">
                <div class="title">三亚亚龙湾热带天堂森林公园门票</div>
                <div class="info">
                    <div class="price" style="color: coral">$100</div>
                    <div class="sales">销量：1000</div>
                </div>
            </div>
        </div>
        <div class="box">
            <img src="https://wen-travel.oss-cn-guangzhou.aliyuncs.com/ticket/ticket_01.png" alt="ticket1">
            <div class="content">
                <div class="title">三亚亚龙湾热带天堂森林公园门票</div>
                <div class="info">
                    <div class="price" style="color: coral">$100</div>
                    <div class="sales">销量：1000</div>
                </div>
            </div>
        </div>
        <div class="box">
            <img src="https://wen-travel.oss-cn-guangzhou.aliyuncs.com/ticket/ticket_01.png" alt="ticket1">
            <div class="content">
                <div class="title">三亚亚龙湾热带天堂森林公园门票</div>
                <div class="info">
                    <div class="price" style="color: coral">$100</div>
                    <div class="sales">销量：1000</div>
                </div>
            </div>
        </div>
        <div class="box">
            <img src="https://wen-travel.oss-cn-guangzhou.aliyuncs.com/ticket/ticket_01.png" alt="ticket1">
            <div class="content">
                <div class="title">三亚亚龙湾热带天堂森林公园门票</div>
                <div class="info">
                    <div class="price" style="color: coral">$100</div>
                    <div class="sales">销量：1000</div>
                </div>
            </div>
        </div>
        <div class="box">
            <img src="https://wen-travel.oss-cn-guangzhou.aliyuncs.com/ticket/ticket_01.png" alt="ticket1">
            <div class="content">
                <div class="title">三亚亚龙湾热带天堂森林公园门票</div>
                <div class="info">
                    <div class="price" style="color: coral">$100</div>
                    <div class="sales">销量：1000</div>
                </div>
            </div>
        </div>
        <div class="box">
            <img src="https://wen-travel.oss-cn-guangzhou.aliyuncs.com/ticket/ticket_01.png" alt="ticket1">
            <div class="content">
                <div class="title">三亚亚龙湾热带天堂森林公园门票</div>
                <div class="info">
                    <div class="price" style="color: coral">$100</div>
                    <div class="sales">销量：1000</div>
                </div>
            </div>
        </div>
        <div class="box">
            <img src="https://wen-travel.oss-cn-guangzhou.aliyuncs.com/ticket/ticket_01.png" alt="ticket1">
            <div class="content">
                <div class="title">三亚亚龙湾热带天堂森林公园门票</div>
                <div class="info">
                    <div class="price" style="color: coral">$100</div>
                    <div class="sales">销量：1000</div>
                </div>
            </div>
        </div>
    </div>

    <!-- 秒杀活动 -->
    <h2>秒杀活动</h2>
    <div class="container">
        <div class="box">
            <img src="https://wen-travel.oss-cn-guangzhou.aliyuncs.com/ticket/ticket_01.png" alt="ticket1">
            <div class="content">
                <div class="title">三亚亚龙湾热带天堂森林公园门票</div>
                <div class="info">
                    <div class="price" style="color: coral">$100</div>
                    <div class="sales">销量：1000</div>
                </div>
            </div>
        </div>
        <div class="box">
            <img src="https://wen-travel.oss-cn-guangzhou.aliyuncs.com/ticket/ticket_01.png" alt="ticket1">
            <div class="content">
                <div class="title">三亚亚龙湾热带天堂森林公园门票</div>
                <div class="info">
                    <div class="price" style="color: coral">$100</div>
                    <div class="sales">销量：1000</div>
                </div>
            </div>
        </div>
        <div class="box">
            <img src="https://wen-travel.oss-cn-guangzhou.aliyuncs.com/ticket/ticket_01.png" alt="ticket1">
            <div class="content">
                <div class="title">三亚亚龙湾热带天堂森林公园门票</div>
                <div class="info">
                    <div class="price" style="color: coral">$100</div>
                    <div class="sales">销量：1000</div>
                </div>
            </div>
        </div>
        <div class="box">
            <img src="https://wen-travel.oss-cn-guangzhou.aliyuncs.com/ticket/ticket_01.png" alt="ticket1">
            <div class="content">
                <div class="title">三亚亚龙湾热带天堂森林公园门票</div>
                <div class="info">
                    <div class="price" style="color: coral">$100</div>
                    <div class="sales">销量：1000</div>
                </div>
            </div>
        </div>
        <div class="box">
            <img src="https://wen-travel.oss-cn-guangzhou.aliyuncs.com/ticket/ticket_01.png" alt="ticket1">
            <div class="content">
                <div class="title">三亚亚龙湾热带天堂森林公园门票</div>
                <div class="info">
                    <div class="price" style="color: coral">$100</div>
                    <div class="sales">销量：1000</div>
                </div>
            </div>
        </div>
        <div class="box">
            <img src="https://wen-travel.oss-cn-guangzhou.aliyuncs.com/ticket/ticket_01.png" alt="ticket1">
            <div class="content">
                <div class="title">三亚亚龙湾热带天堂森林公园门票</div>
                <div class="info">
                    <div class="price" style="color: coral">$100</div>
                    <div class="sales">销量：1000</div>
                </div>
            </div>
        </div>
        <div class="box">
            <img src="https://wen-travel.oss-cn-guangzhou.aliyuncs.com/ticket/ticket_01.png" alt="ticket1">
            <div class="content">
                <div class="title">三亚亚龙湾热带天堂森林公园门票</div>
                <div class="info">
                    <div class="price" style="color: coral">$100</div>
                    <div class="sales">销量：1000</div>
                </div>
            </div>
        </div>
        <div class="box">
            <img src="https://wen-travel.oss-cn-guangzhou.aliyuncs.com/ticket/ticket_01.png" alt="ticket1">
            <div class="content">
                <div class="title">三亚亚龙湾热带天堂森林公园门票</div>
                <div class="info">
                    <div class="price" style="color: coral">$100</div>
                    <div class="sales">销量：1000</div>
                </div>
            </div>
        </div>
    </div>

</div>
</body>

<script type="text/javascript">
    // 全文检索
    function search() {
        var keyword=$("#keyword_input").val()
        var url ="  http://search.travel.com/ticketList.html?keyword="+keyword;
        window.open(url);
    }
</script>
</html>
